<template>
	<view style="-webkit-app-region: drag" class="stream"
		:style="{'background-color':`rgba(${streamForm.backgroundColor.r},${streamForm.backgroundColor.g},${streamForm.backgroundColor.b},${streamForm.backgroundColor.a}`}">

		<div class="body" style="-webkit-app-region: drag">

			<view
				:style="{'font-size':streamForm.fontSize+'upx','color':`rgba(${streamForm.fontColor.r},${streamForm.fontColor.g},${streamForm.fontColor.b},${streamForm.fontColor.a}`}"
				class="member-item" v-for="item in memberList" :key="item.id">
				<text class="label">{{item.nickname}}</text>
				<text class="value">{{item.score}}</text>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isElectron: false,
				memberList: [],
				streamForm: {}

			}
		},
		onLoad() {
			var userAgent = navigator.userAgent.toLowerCase();
			this.isElectron = userAgent.indexOf('electron') > -1
			var streamContent = uni.getStorageSync("stream-content")
			if (streamContent) {
				this.streamForm = streamContent
			}


			this.onEvent()
		},
		methods: {
			onEvent() {
				var that = this
				if (this.isElectron) {
					const {
						ipcRenderer
					} =
					window.require('electron');
					ipcRenderer.on("stream-content-change", function(event, payload) {
						console.log("stream-content-change", payload)
						if (payload) {
							if (payload.memberList) {
								that.memberList = payload.memberList
							}
							that.streamForm = payload
							console.log(that.streamForm)
						}

					})
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.stream {
		width: 100vw;
		min-height: 100vh;
		border-radius: 8upx;

		.body {
			.member-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24upx;
				margin-bottom: 24upx;
				margin-left: 24upx;
				margin-right: 24upx;

				.label {
					flex-grow: 1;
					display: block;

					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行

				}

				.value {
					flex-shrink: 0;
				}
			}
		}

		.body::before {
			content: "";
			clear: both;
			display: table;
		}

		.body::after {
			content: "";
			clear: both;
			display: table;
		}

		.body::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}

	}

	.stream::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}
</style>